<template>
  <div>
    <el-card class="box-card">
      <!-- 表头 -->
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path:path  }">{{title}}</el-breadcrumb-item>
          <el-breadcrumb-item>详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 用户信息 -->
      <el-form
          :model="ruleForm"
          ref="ruleForm"
          :label-position="labelPosition"
          label-width="80px"
          disabled
      >
        <el-form-item label="用户名">
          <el-input v-model="ruleForm.userName" style="width:600px" maxlength="15"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="ruleForm.userRealName" style="width:600px" maxlength="15"></el-input>
        </el-form-item>

        <el-form-item label="联系电话">
          <el-input v-model="ruleForm.userPhone" style="width:600px" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="段位">
          <el-input v-model="ruleForm.gradeName" style="width:600px" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="积分">
          <el-input v-model="ruleForm.userServiceIntegral" style="width:600px" maxlength="11"></el-input>
        </el-form-item>

        <el-form-item label="身份证号">
          <el-input v-model="ruleForm.userIdCard" disabled style="width:600px" maxlength="15"></el-input>
        </el-form-item>

        <el-form-item label="帮手类型">
          <span>{{ ruleForm.helperType == 1 ? '普通用户' : '商家' }}</span>
        </el-form-item>
        <el-form-item label="养宠经验">
          <el-input v-model="ruleForm.helperPetExperience" disabled style="width:600px" maxlength="15"></el-input>
        </el-form-item>
        <el-form-item label="擅长宠物">
          <el-input v-model="ruleForm.helperGoodsPet" disabled style="width:600px" maxlength="15"></el-input>
        </el-form-item>
        <el-form-item label="店铺名称">
          <el-input v-model="ruleForm.helperShopName" disabled style="width:600px" maxlength="15"></el-input>
        </el-form-item>
        <el-form-item label="店铺地址">
          <el-input v-model="ruleForm.helperShopAddress" disabled style="width:600px" maxlength="15"></el-input>
        </el-form-item>
        <el-form-item label="环境">
            <el-image v-for="(item,index) in ruleForm.mediaList"
                style="width: 100px; height: 100px ;margin-left: 20px"
                :src="item"
                      :preview-src-list="ruleForm.mediaList"
            >
            </el-image>

<!--          <el-input v-model="ruleForm.mediaList" disabled style="width:600px" maxlength="15"></el-input>-->
        </el-form-item>
<!--        <el-form-item label="身份证正面">-->
<!--          <el-image-->
<!--              style="width: 100px; height: 100px"-->
<!--              :src="userIdCardFace"-->
<!--              :preview-src-list="userIdCardFacelist">-->
<!--          </el-image>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="身份证反面">-->
<!--          <el-image-->
<!--              style="width: 100px; height: 100px"-->
<!--              :src="userIdCardReverse"-->
<!--              :preview-src-list="userIdCardReverseList">-->
<!--          </el-image>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="手持身份证照">-->
<!--          <el-image-->
<!--              style="width: 100px; height: 100px"-->
<!--              :src="userHandCard"-->
<!--              :preview-src-list="userHandCardList">-->
<!--          </el-image>-->
<!--        </el-form-item>-->
        <el-form-item label="保证金">
          <el-input v-model="ruleForm.userMargin" style="width:600px" maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="帮助收入">
          <el-input v-model="ruleForm.userTotalRevenue" style="width:600px" maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <span>{{ ruleForm.helperStatus == 1 ? '待审核' : ruleForm.helperStatus == 2 ? ' 已通过' : '已拒绝' }}</span>
        </el-form-item>

      </el-form>
      <el-button  type="primary" @click="prev()">返回</el-button>

    </el-card>

  </div>
</template>

<script>
import base from "@/views/api/base";

export default {
  data() {
    return {
      // 店铺照片显示和隐藏
      hideUpload: false,
      limitCount: 1,
      // 营业执照显示和隐藏
      license: false,
      limitCount: 1,
      //营业执照
      merchant: false,
      // 参数信息
      labelPosition: "left",
      dialogVisible: false, //图片查看
      dialogImageUrl: "", //图片地址
      upadteurl: "", //图片上传地址
      ruleForm: {},
      bannerlist: [], //商家信息
      disabled: true, //禁用被修改

      fileList: [], //图片回显

      fileListshop: [], //商家封面照片

      merchantList: [], //上传多张图片

      formDate: "",
      hideELUpload: "",
      helperId:"",
      userIdCardFace: "",
      userIdCardFacelist: [],
      userIdCardReverse:"",
      userIdCardReverseList:[],
      userHandCard:"",
      userHandCardList:[],
      title:"",
      path:""
    };
  },
  mounted() {

  },
  created() {
    this.userId=this.$route.query.userId
    this.helperId = this.$route.query.helperId
    this.title=this.$route.query.title
    this.path=this.$route.query.path
    this.getHelperDetails()
    // this.ruleForm = JSON.parse(this.$route.query.row)
    // this.userIdCardFace = this.ruleForm.userIdCardFace
    // this.userIdCardReverse = this.ruleForm.userIdCardReverse
    // this.userHandCard = this.ruleForm.userHandCard
    // this.userIdCardFacelist.push(this.ruleForm.userIdCardFace)
    // this.userIdCardReverseList.push(this.ruleForm.userIdCardReverse)
    // this.userHandCardList.push(this.ruleForm.userHandCard)
  },
  methods: {
    getHelperDetails(){
      let param = {
        userId :this.userId,
        helperId:this.helperId
      }
      console.log('paramparam',param)
      this.$http.article.getHelperDetails(param).then(res => {
        console.log('详情',res)
        this.ruleForm =res.result.result
        this.userIdCardFace = this.ruleForm.userIdCardFace
        this.userIdCardReverse = this.ruleForm.userIdCardReverse
        this.userHandCard = this.ruleForm.userHandCard
        this.userIdCardFacelist.push(this.ruleForm.userIdCardFace)
        this.userIdCardReverseList.push(this.ruleForm.userIdCardReverse)
        this.userHandCardList.push(this.ruleForm.userHandCard)
      });
    },

    // 重置按钮信息
    prev() {
      this.$router.go(-1)
    },
  }
};
</script>

<style lang="scss" scoped>
.bg {
  width: 100%;
  height: 100%;
  background-color: #f4f7fd;
  //   overflow: hidden;
}

.box-card {
  //   display: flex;
  //   justify-content: center;
  width: 98%;
  margin: 0 auto;
  margin-top: 10px;
}

// 店铺封面照片
.showhide ::v-deep .el-upload--picture-card {
  display: none;
}

// 营业执照
.license ::v-deep .el-upload--picture-card {
  display: none;
}

// 店铺照片
.merchant ::v-deep .el-upload--picture-card {
  display: none;
}
</style>